/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Label } from 'bizcharts';
import DataSet from '@antv/data-set';
import styles from './style.less';

class Pies extends React.Component {
  render() {
    const { piesList, numType } = this.props;
    const { DataView } = DataSet;
    const dv = new DataView();
    dv.source(piesList).transform({
      type: 'percent',
      field: `${numType}`,
      dimension: 'brand',
      as: 'percent',
    });
    const cols = {
      percent: {
        formatter: vals => {
          vals = `${Math.round(vals * 1000) / 10}%`;
          return vals;
        },
      },
    };
    const isEmpty = !piesList || piesList.every((val = {}) => val[numType] == 0);
    return (
      <div>
        {!isEmpty ? (
          <Chart height={300} data={dv} scale={cols} padding={[80, 100, 80, 80]} forceFit>
            <Coord type="theta" innerRadius={0.75} />
            <Axis name="percent" />
            {/* <Legend position="right-center" /> */}
            <Tooltip
              showTitle={false}
              itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}: {value}</li>"
            />
            <Geom
              type="intervalStack"
              position="percent"
              color="brand"
              tooltip={[
                'brand*percent',
                (brand, percent) => {
                  percent = `${Math.round(percent * 1000) / 10}%`;
                  return {
                    name: brand,
                    value: percent,
                  };
                },
              ]}
              style={{
                lineWidth: 1,
                stroke: '#fff',
              }}
            >
              <Label
                content={[
                  'brand*percent',
                  (brand, percent) => {
                    percent = `${Math.round(percent * 1000) / 10}%`;
                    return `${brand}:${percent}`;
                  },
                ]}
                offset={20}
                textStyle={{
                  rotate: 0,
                  shadowBlur: 2,
                  shadowColor: 'rgba(0, 0, 0, .45)',
                }}
              />
            </Geom>
          </Chart>
        ) : (
          <div className={styles.example}>暂无数据</div>
        )}
      </div>
    );
  }
}

export default Pies;
